<template>
  <div class="detail">
    <div class="tit_img" v-if="items.tags">
      <img :src="items.tags">
    </div>
    <div class="tit_content">
      <p>{{items.title}}</p>
      <div>
        <p>作者：{{items.authorName}}</p>
        <p>浏览量：{{items.viewCount}}</p>
      </div>
      <div>
        <p>用户：{{items.author}}</p>
        <p>发表时间：{{items.createTime}}</p>
      </div>
      <div>
        <p></p>
        <p><u-button size="mini" plain @click="goChat" type="warning">联系作者</u-button></p>
      </div>

    </div>
    <u-tabs-swiper 
      ref="tabs" 
      name="cate_name" 
      active-color="#2979ff"
      count="cate_count" 
      :current="current"
      @change="tabsChange"
      :list="list" 
      :is-scroll="false">
    </u-tabs-swiper>
    <div class="detail_sec">
      <div v-if="current==0" class="text">
        <u-parse :html="items.text"></u-parse>
      </div>
      <div v-if="current==1" class="comment" :class="current==1?'boottom':''">
        <div v-if="comments.length==0" style="padding-top:100rpx;">
           <u-empty text="暂无评论" mode="list"></u-empty>
        </div>
        <uni-swipe-action>
          <uni-swipe-action-item 
            v-for="(val, index) in comments" :key="index" 
            :right-options="options" 
            @click="click(val.id)" 
          >
            <div class="comment_sec">
              <p>{{val.comment}}</p>
              <div>
                <span>{{val.commentorName}}</span>
                <span>{{val.createTime}}</span>
              </div>
            </div>
          </uni-swipe-action-item>
        </uni-swipe-action>
      </div>
    </div>
    <div class="detail_foot" v-if="current==1">
      <u-button style="width:90%;" shape="circle" @click="addComment" type="primary">发表评论</u-button>
    </div>
    <u-toast ref="uToast" />
    <u-modal v-model="show" @cancel="cancel" @confirm="confirm" :show-cancel-button="true" :content="content"></u-modal>
  </div>
</template>
<script>
export default {
  data() {
    return {
      items:{},
      current:0,
      list:[
        {cate_name:'正文'},
        {cate_name:'评论'},
      ],
      comments:[],
      essayId:'',
      options: [
        {
          text: '删除',
          style: {
            backgroundColor: '#dd524d'
          }
        }
      ],
      id:"",
      show: false,
			content: '确定要删除这条评论吗？'
    }
  },
  methods: {
    goChat(){
      uni.navigateTo({
         url: '../chatcon/chatcon'
      });
   },
    cancel(){
      this.show = false
    },
    confirm(){
      let token = this.$store.state.token
      uni.request({
        url: 'http://39.106.224.223:8088/cms/ordinary/comment/del',
        header:{
          'content-type':'application/json',
          'Authorization':token
        },
        data:{ essayId:this.essayId, commentId:this.id },
        method:'GET',
        success:res=>{
          if (res.data.code == 200) {
            this.$refs.uToast.show({
              title: "删除成功",
              type: "success"
            });
            this.initFn()
          }
        }
      })
      
    },
    click(id) {
        this.id = id
        this.show = true;
    },
    tabsChange(value){
      this.current = value
    },
    addComment(){
      console.log(this.essayId);
      uni.navigateTo({
         url: './addComment?id='+this.essayId
      });
    },
    initFn(){
      let that = this;
      let token = this.$store.state.token
      uni.request({
        url: 'http://39.106.224.223:8088/cms/ordinary/comment/query', //仅为示例，并非真实接口地址。
        data: {
          essayId: this.essayId
        },
        method:'GET',
        header: {
          "content-type": "application/json",
          Authorization: token
        },
        success: (res) => {
          console.log(res);
          if (res.data.code == 200) {
            this.comments = res.data.data
          }
        }
      });
    },
  },
  
  onLoad(options) {
      let id = JSON.parse(options.id); // 字符串转对象
      this.essayId = id
      let that = this;
      let token = this.$store.state.token
      uni.request({
        url: 'http://39.106.224.223:8088/cms/ordinary/essay/query/detail', //仅为示例，并非真实接口地址。
        data: {
          essayId: id
        },
        method:'GET',
        header: {
          "content-type": "application/json",
          Authorization: token
        },
        success: (res) => {
          console.log(res);
          if (res.data.code == 200) {
            if (res.data.data.tags.indexOf('.png')==-1&& res.data.data.tags.indexOf('.jpeg')==-1) {
              res.data.data.tags = "../../static/cat.jpeg"
            }
            this.items = res.data.data
          }
        }
      });

      uni.request({
        url: 'http://39.106.224.223:8088/cms/ordinary/comment/query', //仅为示例，并非真实接口地址。
        data: {
          essayId: id
        },
        method:'GET',
        header: {
          "content-type": "application/json",
          Authorization: token
        },
        success: (res) => {
          console.log(res);
          if (res.data.code == 200) {
            this.comments = res.data.data
          }
        }
      });
  }
}
</script>
<style lang="scss">
  .detail{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    .tit_img{
      width: 100%;
      height: 450rpx;
      img{
        width: 100%;
        height: 100%;
      }
    }
    .tit_content{
      padding: 30rpx 10rpx;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      border-bottom: 1px solid #eeeeee;
      div{
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #c1c1c1;
        font-size: 12px;
        padding: 10rpx 0;
      }
    }
    .tit_content>p{
      font-size: 16px;
      font-weight: 700;
      padding: 15rpx 0;
    }
    .boottom{
      padding-bottom: 100rpx;
    }
    .detail_sec{
      border-top: 1px solid #eeeeee;
      .text{
        padding: 10rpx;
        box-sizing: border-box;
      }
      .comment{
        .comment_sec{
         padding: 20rpx;
         box-sizing: border-box;
         border-bottom: 1px solid #eeeeee;
         p{
           padding-bottom: 50rpx;
         }
         div{
           display: flex;
           justify-content: space-between;
           font-size: 12px;
           color: #c1c1c1;
         }
        }
      }
    }
    .detail_foot{
      width: 100%;
      height: 100rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      position: fixed;
      bottom: 0;
      background: #fff;
    }

  }
</style>